<script setup lang="ts">
  import { PropType } from 'vue'

  defineOptions({
    name: 'CustomerSendInfoReturnFactory',
  })

  const props = defineProps({
    sendInfo: {
      type: Object as PropType<{
        name: string
        phone: string
        address: string
        contacts: string
      }>,
      default: () => {
        return {
          name: '',
          phone: '',
          address: '',
          contacts: '',
        }
      },
    },
  })
</script>

<template>
  <div class="return-factory-detail-customer-info">
    <div class="title">公司寄出信息</div>
    <div class="info-list">
      <div class="info-item">
        <div class="label">公司姓名:</div>
        <div class="value">{{ props.sendInfo.name }}</div>
      </div>
      <div class="info-item">
        <div class="label">报单人信息:</div>
        <div class="value">{{ props.sendInfo.contacts }}</div>
      </div>
      <div class="info-item">
        <div class="label">报单人电话:</div>
        <div class="value">{{ props.sendInfo.phone }}</div>
      </div>
      <div class="info-item">
        <div class="label">公司地址:</div>
        <div class="value">
          {{ props.sendInfo.address }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-detail-customer-info {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info-list {
      padding: 0 0 0 9px;
      display: flex;
      row-gap: 4px;
      flex-wrap: wrap;
      column-gap: 64px;
      flex-direction: column;

      .info-item {
        display: flex;
        column-gap: 5px;

        .label {
          min-width: 74.89px;
          max-width: 74.89px;
          text-align: right;
          color: #606266;
          white-space: nowrap;
        }
      }
    }
  }
</style>
